<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>axios</title>
		<script src="js/vue.js"></script>
		<script src="js/axios.min.js"></script>
		<script src="js/echarts.min.js"></script>
	</head>
	<style>
		* {
			padding: 0;
			margin: 0;
			box-sizing: border-box;
		}

		body {
			background-color: whitesmoke;
		}

		ul {
			list-style-type: none;
			display: flex;
			flex-wrap: wrap;
		}

		li {
			width: calc(25% - 20px);
			margin: 10px;
			transition: transform 0.3s ease;
			overflow: hidden;
		}

		li:hover {
			transform: scale(1.1);
		}

		img {
			display: block;
			margin-bottom: 5px;
			width: 100%;
			aspect-ratio: 1 / 1;
			object-fit: cover;
		}
	</style>

	<body>
		<div id='app'>
			<ul>
				<li v-for="item in tags" :key="item.slug">
					<!-- 添加图片加载错误处理 -->
					<img v-if="item.image && item.image.medium" width="100%"
						:src="'//images.weserv.nl/?url=' + item.image.medium" alt="" @error="handleImageError(item)">
					<span v-else>暂无图片</span>
					<span>{{ item.name }}</span>
				</li>
			</ul>
		</div>
		<script>
			Vue.createApp({
				data() {
					return {
						tags: []
					};
				},
				created() {
					this.getData();
				},
				methods: {
					getData() {
						axios.get('https://www.skypixel.com/api/v2/tags')
							.then((res) => {
								console.log('请求成功');
								console.log('响应数据:', res.data);
								// 假设图片信息数组在 res.data.data.items 中
								if (res.data.data && Array.isArray(res.data.data.items)) {
									this.tags = res.data.data.items.filter(item => item.image && item.image.medium);
								} else {
									console.log('响应数据中未找到有效的图片信息数组');
								}
								console.log('过滤后的数据:', this.tags);
							})
							.catch((err) => {
								console.log('请求失败', err);
							})
							.finally(() => {
								console.log('请求完成');
							});
					},
					handleImageError(item) {
						console.log(`图片加载失败: ${item.name}, 图片地址: //images.weserv.nl/?url=${item.image.medium}`);
					}
				},
			}).mount('#app');
		</script>
	</body>

</html>
